<div class="columns issue">
  <div class="column is-12">
    <%= if @title_edit do %>
      <.form let={f} for={@title_changeset} as="issue" class="mb-3" phx_change="validate_title", phx_submit="update_title">
        <div class="field is-grouped">
          <div class="control is-expanded">
            <%= text_input f, :title, class: "input" %>
          </div>
          <%= if @title_changeset.changes != %{} do %>
            <div class="control">
              <%= submit "Save", class: "button is-link" %>
            </div>
          <% end %>
          <div class="control">
            <button type="reset" class="button" phx-click="cancel_title_edit">Cancel</button>
          </div>
        </div>
        <%= error_tag(f, :title) %>
      </.form>
    <% else %>
      <div class="field is-grouped">
        <div class="control is-expanded">
          <h1 class="issue-title">
            <%= @issue.title %>
            <span class="has-text-grey-light">#<%= @issue.number %></span>
          </h1>
        </div>
        <%= if :edit_title in @issue_permissions do %>
          <div class="control">
            <button class="button" phx-click="edit_title">Edit</button>
          </div>
        <% end %>
      </div>
    <% end %>
    <%= case @issue.status do %>
      <% "open" -> %>
        <p class="tag is-success">
          <span class="icon"><i class="fa fa-exclamation-circle"></i></span>
          <span>Open</span>
        </p>
      <% "close" -> %>
        <p class="tag is-danger">
          <span class="icon"><i class="fa fa-check-circle"></i></span>
          <span>Closed</span>
        </p>
    <% end %>
    <a href={Routes.user_path(@socket, :show, @issue.author)} class="has-text-dark"><%= @issue.author.login %></a>
    opened this issue <%= datetime_format(@issue.inserted_at, "{relative}") %>
  </div>
</div>

<hr />

<div id="feed" class="columns" phx-hook="IssueFeed">
  <div class="column is-three-quarters">
    <div class="thread">
      <%= live_component(GitGud.Web.CommentLive,
        id: "comment-#{@issue_comment.id}",
        current_user: @current_user,
        repo: @repo,
        repo_permissions: @repo_permissions,
        comment: @issue_comment,
        permissions: List.delete(CommentQuery.permissions(@issue_comment, @current_user, @repo_permissions), :delete)
      ) %>
      <div id="issue-timeline" class="timeline" phx-update="append">
        <div id="issue-timeline-header" class="timeline-header">
          <%= case @issue_comment_count do %>
            <% 1 -> %> 1 comment
            <% n -> %> <%= n %> comments
          <% end %>
        </div>
        <%= for feed_item <- @issue_feed do %>
          <%= case feed_item do %>
            <% %Comment{} = comment -> %>
              <div id={"issue-comment-#{comment.id}"} class="timeline-item">
                <div class="timeline-content">
                  <%= live_component(@socket, GitGud.Web.CommentLive,
                    id: "comment-#{comment.id}",
                    current_user: @current_user,
                    repo: @repo,
                    repo_permissions: @repo_permissions,
                    comment: comment
                  ) %>
                </div>
              </div>
            <% {event, index} -> %>
              <div id={"issue-event-#{index}"} class="timeline-item">
                <%= live_component(GitGud.Web.IssueEventLive,
                  id: "event-#{index}",
                  repo: @repo,
                  event: event
                ) %>
              </div>
          <% end %>
        <% end %>
      </div>
      <%= unless Enum.empty?(@users_typing) do %>
        <div class="timeline">
          <div id="issue-presence" class="timeline-item">
            <div class="timeline-marker is-icon">
              <i class="fa fa-keyboard"></i>
            </div>
            <div class="timeline-content">
              <%= case Enum.reverse(@users_typing) do %>
                <% [user_login] -> %>
                  <a href={Routes.user_path(@socket, :show, user_login)} class="has-text-dark"><%= user_login %></a>
                  <span class="loading-ellipsis">is typing</span>
                <% [second_user_login, first_user_login] -> %>
                  <a href={Routes.user_path(@socket, :show, first_user_login)} class="has-text-dark"><%= first_user_login %></a>
                  and
                  <a href={Routes.user_path(@socket, :show, second_user_login)} class="has-text-dark"><%= second_user_login %></a>
                  <span class="loading-ellipsis">are typing</span>
                <% [last_user_login|users_logins] -> %>
                  <%= for user_login <- Enum.reverse(users_logins) do %>
                    <a href={Routes.user_path(@socket, :show, user_login)} class="has-text-dark"><%= user_login %></a>,
                  <% end %>
                  <a href={Routes.user_path(@socket, :show, last_user_login)} class="has-text-dark"><%= last_user_login %></a>
                  <span class="loading-ellipsis">are typing</span>
              <% end %>
            </div>
          </div>
        </div>
      <% end %>
      <%= if :comment in @issue_permissions do %>
        <div class="comment-form">
          <%= live_component(GitGud.Web.CommentFormLive,
            id: "issue-comment-form",
            current_user: @current_user,
            repo: @repo,
            minimized: false,
            phx_change: "validate_comment",
            phx_submit: "add_comment") do %>
              <% comment_form_assigns -> %>
                <div class="control">
                  <%= case @issue.status do %>
                    <% "open" -> %>
                      <%= if :close in @issue_permissions do %>
                        <%= if Keyword.fetch!(comment_form_assigns, :changeset).changes == %{} do %>
                          <a class="button" phx-click="close">Close issue</a>
                        <% else %>
                          <%= submit "Close and comment", class: "button", phx_click: "close" %>
                        <% end %>
                      <% end %>
                    <% "close" -> %>
                      <%= if :reopen in @issue_permissions do %>
                        <%= if Keyword.fetch!(comment_form_assigns, :changeset).changes == %{} do %>
                          <a class="button" phx-click="reopen">Reopen issue</a>
                        <% else %>
                          <%= submit "Reopen and comment", class: "button", phx_click: "reopen" %>
                        <% end %>
                      <% end %>
                  <% end %>
                </div>
                <div class="control">
                  <%= submit "Add comment", class: "button is-success", disabled: Keyword.fetch!(comment_form_assigns, :changeset).changes == %{} %>
                </div>
          <% end %>
        </div>
      <% end %>
    </div>
  </div>
  <div class="column is-one-quarter">
    <aside class="menu is-sticky">
      <%= live_component(@socket, GitGud.Web.IssueLabelSelectLive,
        id: "issue-label-select",
        repo: @repo,
        issue: @issue,
        editable: :edit_labels in @issue_permissions
      ) %>
    </aside>
  </div>
</div>
